<template>
    <div class="container">
        <div class="header">
            <div class="header-left" @click="goBack()">
                <van-icon size="30" name="arrow-left" />
            </div>
            填写服务订单
        </div>
        <status-bar :item="0" />
        <van-cell class="cell">
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
                <van-image width="25" height="25" :src="createInfo.service.serviceImg" />
                <span class="server-name">{{ createInfo.service.serviceName }}</span>
            </template>
            <template #default>
                <div class="service-text">服务内容</div>
            </template>
        </van-cell>
        <van-cell-group>
            <van-cell class="cell">
                <template #title>
                    <div class="service-name">就诊医院</div>
                </template>
                <template #default>
                    <div @click="showHospital = true" class="service-name">
                        {{ form.hospital_name || '请选择就诊医院' }}
                        <van-icon name="arrow" />
                    </div>
                </template>
            </van-cell>
            <van-cell class="cell">
                <template #title>
                    <div class="service-name">就诊时间</div>
                </template>
                <template #default>
                    <div @click="showStartTime = true" class="service-name">
                        {{ currentDate || '请选择就诊时间' }}
                        <van-icon name="arrow" />
                    </div>
                </template>
            </van-cell>
            <van-cell class="cell">
                <template #title>
                    <div class="service-name">陪诊师</div>
                </template>
                <template #default>
                    <div @click="showComponion = true" class="service-name">
                        {{ companionName || '请选择陪诊师' }}
                        <van-icon name="arrow" />
                    </div>
                </template>
            </van-cell>
            <van-cell class="cell">
                <template #title>
                    <div class="service-name">接送地址</div>
                </template>
                <template #default>
                    <van-field
                    class="text"
                    input-align="right"
                        v-model="form.receiveAddress"
                        placeholder="请填写接送地址"
                        />
                </template>
            </van-cell>
            <van-cell class="cell">
                <template #title>
                    <div class="service-name">联系电话</div>
                </template>
                <template #default>
                    <van-field
                    class="text"
                    input-align="right"
                        v-model="form.tel"
                        placeholder="请填写联系电话"
                        />
                </template>
            </van-cell>

        </van-cell-group>
        <van-cell-group title="服务需求" class="cell">
            <van-field
                    class="text"
                    style="height: 100px;"
                    v-model="form.demand"
                    placeholder="请检描述您要就诊的科室.."
                    />
        </van-cell-group>

        <van-button  @click="sumbit" type="primary" class="sumbit" size="large">提交订单</van-button>        
        <van-popup 
            v-model:show="showHospital" 
            position="bottom" 
            :style="{ height: '30%' }">
            <van-picker 
            title="标题" 
            :columns="showHospColumsns" 
            @confirm="showHospConfirm"
            @cancel="showHospital = false" />

        </van-popup>
        <van-popup v-model:show="showStartTime" position="bottom" :style="{ height: '30%' }">
            <van-date-picker
                title="选择日期"
                :min-date="minDate"
                @confirm="showTimeConfirm"
                @cancel="showStartTime = false"
                 />
        </van-popup>
        <van-popup 
        v-model:show="showComponion" 
        position="bottom" 
        :style="{ height: '30%' }">
            <van-picker 
            title="陪诊师" 
            :columns="componiconColums" 
            @confirm="showComponiconColums"
            @cancel="showComponion = false" />

        </van-popup>
        <!-- 支付二维码 -->
        <van-dialog  :show-confirm-button="false"   v-model:show="showCode"  :show-cancel-button="false">
            <van-icon name="cross" class="close" @click="closeCode"></van-icon>
            <div></div>
            <van-image width="150" height="150" :src="codeImg"></van-image>
            <div>请使用本人微信扫描二维码</div>
        </van-dialog>
    </div>
</template>

<script setup>
import { computed, getCurrentInstance, onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router';
import statusBar from '../../components/statusBar.vue';
import Qrcode from 'qrcode'
const { proxy } = getCurrentInstance()

const createInfo = reactive({
    companion: [],
    hospitals: [],
    service: {}
})
onMounted(async () => {
    const { data } = await proxy.$api.h5Companion()
    Object.assign(createInfo, data.data)
    console.log(createInfo)
})
const router = useRouter()

const goBack = () => {
    router.go(-1)
}

//控制弹窗
const showHospital = ref(false)
//form表单
const form = reactive({
    hospital_id: '',
    hospital_name: '',
    demand: '',
    companion_id: '',
    receiveAddress: '',
    tel: '',
    starttime: 0
})

//就诊医院
const showHospColumsns = computed(() => {
    return createInfo.hospitals.map(item => {
        return { text: item.name, value: item.id }
    })
})
//选择医院
const showHospConfirm = (item) => {
    console.log(item)
    form.hospital_id = item.selectedValues[0]
    form.hospital_name = item.selectedOptions[0].text
    //关闭弹出层
    showHospital.value = false
}
const showStartTime = ref(false)
const currentDate = ref()
//最小日期
const minDate = ref(new Date())

const showTimeConfirm = (item) => {
    const dataStr = item.selectedValues.join('-')
    currentDate.value = dataStr

    form.starttime = new Date(dataStr).getTime()
    showStartTime.value = false
}
//陪诊师

//陪护师
const showComponion = ref(false)
const componiconColums = computed(() => {
    return createInfo.companion.map(item => {
        return { text: item.name, value: item.id }
    })
})

const companionName = ref()
//陪护师提交
const showComponiconColums = (item) =>{
    companionName.value = item.selectedOptions[0].text
    form.companion_id = item.selectedOptions[0].value
    showComponion.value = false
}
//支付弹窗
const showCode  = ref(false)
//二维码地址
const codeImg = ref('')
const closeCode = () =>{
    showCode.value = false
    router.push('/order')
}
//提交
const sumbit = async () =>{
    const params = [
        'hospital_id',
        'hospital_name',
        'demand',
        'companion_id',
        'receiveAddress',
        'tel',
        'starttime'
    ]
    for(const i of params) {
        if(!form[i]){
            showNotify({message:'请把你每一项都填写'});
            return
        }
    }
    const {data:orderRes} = await proxy.$api.createOrder(form)
    console.log(orderRes.data.wx_code)
    Qrcode.toDataURL(orderRes.data.wx_code).then((url) =>{
        showCode.value= true
        codeImg.value = url
    })
}
</script>

<style lang="less" scoped>
.container {
    background-color: #f0f0f0;
    height: 100vh;
}

.header {
    padding: 10px 0;
    text-align: center;
    line-height: 30px;
    font-size: 15px;

    .header-left {
        float: left;
    }
}

.cell {
    width: 95%;
    margin: 5px auto;
    background-color: #fff;

    ::v-deep(.van-field__control) {
        color: var(--van-cell-value-color);
    }

    ::v-deep(.van-cell__title) {
        display: flex;
        align-items: center;
    }

    .server-name {
        margin-left: 10px;
    }
}

.service-text {
    background: url() no-repeat center center;
    background-size: 20px;
}

.sumbit {
    position: absolute;
    bottom: 0;
}

::v-deep(.van-dialog__content) {
    text-align: center;
    padding: 20px;

    .close {
        position: absolute;
        left: 20px;
    }
}
</style>
